<template>
    <view class="container">
        <u-row
            gutter="22"
            customStyle="flex-wrap: wrap;"
            v-if="collectionList.length > 0"
        >
            <block v-for="(item, k) in collectionList" :key="k">
                <u-col
                    :span="6"
                    customStyle="margin-bottom: 30rpx"
                    @click="checkNft(item)"
                >
                    <collect-item
                        :nft="nft"
                        showType="select"
                        :ownerCode="item.code"
                        :isSelect="choiceNftCode.id === item.id"
                        :validNum="item.valid_num"
                        :validAt="item.validAt"
                        :isExchange="item.isExchange"
                    ></collect-item>
                </u-col>
            </block>
        </u-row>
        <u-empty
            mode="data"
            width="400rpx"
            height="400rpx"
            icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
            class="empty"
            v-else
        >
        </u-empty>
        <u-loadmore
            height="50rpx"
            :status="loadStatus"
            v-if="total > 8"
            marginTop="20rpx"
            marginBottom="20rpx"
            fontSize="32rpx"
            iconSize="34rpx"
            line
        />
    </view>
</template>

<script>
    import CollectItem from "@/components/CollectItem"
    import { getCollectInfo, getNftCollection } from "@/config/api"
    export default {
        name: "collection",
        components: {
            CollectItem
        },
        data() {
            return {
                nft: {},
                nftId: null,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    column: "code",
                    direction: "asc",
                    nftId: null
                },
                collectionList: [],
                total: 0
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.collectionList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
            choiceNftCode() {
                return this.$store.getters.choiceNftCode ?　this.$store.getters.choiceNftCode:{}
            }
        },
        async onLoad(option) {
            this.listQuery.nftId = this.nftId = option.nftId
            const res = await getCollectInfo({nftId: option.nftId})
            this.nft = res.nft
            await this.getData()
        },
        onReachBottom() {
            if (this.total > this.collectionList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        methods: {
            async getData(more = false) {
                const res = await getNftCollection(this.listQuery)
                if (more) {
                    this.collectionList = [...this.collectionList, ...res.items]
                } else {
                    this.collectionList = res.items
                }
                this.total = res.total
            },
            checkNft(item) {
                if (item.valid_num > 0) {
                    uni.$u.toast("冻结期内不能挂售")
                    return
                }
                if (item.isExchange) {
                    uni.$u.toast("该藏品已在挂售中")
                    return
                }
                this.$store.dispatch("user/setChoiceNftCode", item)
                uni.$u.route({
                    type: "navigateBack"
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 20rpx;
        background: #F0F2F5;
    }
</style>
